<!-- 虚拟钥匙控车单 -->
<template>
  <div class="page-container">
    <list-searcher :searchList="searchList" v-model:searchForm="queryParam" @loadData="loadData" @change="searchChange" />
    <table-index :table="table" @loadData="loadData">
      <template #carInfo="{ record }">
        <div>{{ record.licenseNo }}</div>
        <div>{{ record.modelName }}</div>
      </template>
      <template #orderInfo="{ record }">
        <div class="order-info-item" v-if="record.refCode">
          自有
          <div>{{ record.refCode }}</div>
        </div>
        <div class="order-info-item" v-if="record.channelOrderCode">
          渠道
          <div>{{ record.channelOrderCode }}</div>
        </div>
      </template>
    </table-index>
  </div>
</template>

<script setup name="CarVirtualKeyList">
  import { getCarControlList, interceptControl, carControlRemove, carControlEnableNow } from '@/api/asset/virtualKey'
  import { getCarControlSms } from '@/api/asset/carTbox'
  import { onMounted, reactive, computed } from 'vue'
  import { useTable, useFetchTableDataApi } from '@/hooks/table'
  import { Modal, Notification } from '@arco-design/web-vue'

  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo, navigateToCreate, registerListHotUpdate } = useNavigate()

  import { usePageDict } from '@/hooks/useDict'
  const carVirtualDict = usePageDict('carVirtualDict')

  // 接口参数（不包含page信息）
  const queryParam = reactive({})

  // dateTime Attrs
  const dateTimeAttrs = {
    type: 'i-range-picker',
    attrs: {
      showTime: true,
      popupContainer: 'body',
      timePickerProps: {
        defaultValue: ['00:00:00', '23:59:59'],
      },
    },
  }

  // 查询条件
  const searchList = computed(() => {
    return [
      { label: '车牌号', prop: 'licenseNoLike', type: 'a-input' },
      { label: '控车单号', prop: 'controlCodeLike', type: 'a-input' },
      {
        label: '控车单状态',
        prop: 'status',
        type: 'a-select',
        options: carVirtualDict.statusEnums,
      },
      {
        label: '关联业务类型',
        prop: 'refType',
        type: 'a-select',
        options: carVirtualDict.refTypeEnums,
      },
      { label: '关联业务单号', prop: 'refCodeLike', type: 'a-input' },
      { label: '控车人姓名', prop: 'memberNameLike', type: 'a-input' },
      { label: '控车人手机号', prop: 'memberPhoneLike', type: 'a-input' },
      {
        label: '控车单开始时间',
        prop: 'startTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.starTimeBegin = value[0]
          queryParam.starTimeEnd = value[1]
        },
      },
      {
        label: '控车单结束时间',
        prop: 'EndTimeRange',
        ...dateTimeAttrs,
        change: (value = []) => {
          queryParam.endTimeBegin = value[0]
          queryParam.endTimeEnd = value[1]
        },
      },
    ]
  })

  // table 配置
  const table = useTable({
    columns: [
      { title: '控车单号', dataIndex: 'controlCode', width: 200, fixed: 'left' },
      { title: '控车人姓名', dataIndex: 'memberName', width: 120 },
      { title: '控车人手机号', dataIndex: 'memberPhone', width: 120 },
      { title: '车辆信息', slotName: 'carInfo', width: 200 },
      { title: '控车单开始时间', dataIndex: 'startTime', width: 180 },
      { title: '控车单结束时间', dataIndex: 'endTime', width: 180 },
      { title: '关联业务类型', dataIndex: 'refTypeName', width: 150 },
      { title: '关联业务单号', slotName: 'orderInfo', width: 200 },
      { title: '单据状态', dataIndex: 'statusName', width: 100 },
    ],
    operates: [
      {
        label: '拦截',
        show: (record) => [0, 1, 2, 3].includes(record.status),
        permission: 'svms:asstes:device:car-virtual-key.intercept',
        method: (record) => {
          Modal.confirm({
            title: '提示',
            cancelText: '取消',
            okText: '确认',
            content: '确认拦截吗？',
            bodyStyle: {
              'text-align': 'center',
            },
            onOk: () => {
              interceptControl({ id: record.id }).then(({ code, message }) => {
                code == 200 && Notification.success({ content: message })
                loadData()
              })
            },
          })
        },
      },
      {
        label: '即刻启用',
        show: (record) => record.status == 0,
        permission: 'svms:asstes:device:car-virtual-key.immediate',
        method: (record) => {
          carControlEnableNow({ id: record.id }).then(({ code, message }) => {
            code == 200 && Notification.success({ content: message })
            loadData()
          })
        },
      },
      {
        label: '发送控车钥匙短信',
        show: (record) => [0, 1].includes(record.status),
        permission: 'svms:asstes:device:car-virtual-key.message',
        method: (record) => {
          getCarControlSms({ id: record.id }).then(({ code, result }) => {
            code == 200 && Notification.success({ content: result })
            loadData()
          })
        },
      },
      {
        label: '编辑',
        show: (record) => [0, 1, 2, 3].includes(record.status),
        permission: 'svms:asstes:device:car-virtual-key.edit',
        method: (record) => {
          navigateTo(`/car-virtual-key/edit/${record.id}`, `${record.controlCode}-编辑`)
        },
      },
      {
        label: '删除',
        permission: 'svms:asstes:device:car-virtual-key.delete',
        method: (record) => {
          // 不是“已结束、已拦截”的控车单不准删除
          if ([0, 1, 2, 3].includes(record.status)) {
            return Notification.error({
              content: '请结束或者拦截之后再删除！',
              closable: true,
              duration: 3000,
            })
          }
          Modal.confirm({
            title: '提示',
            cancelText: '取消',
            okText: '确认',
            content: '确认删除吗？',
            bodyStyle: {
              'text-align': 'center',
            },
            onOk: () => {
              carControlRemove({ id: record.id }).then(({ code, message }) => {
                code == 200 && Notification.success({ content: message })
                loadData()
              })
            },
          })
        },
      },
      {
        label: '操作记录',
        permission: 'svms:asstes:device:car-virtual-key.operaterecords',
        method: (record) => {
          navigateTo(`/car-virtual-key/detail/${record.id}?activeType=${2}`, `${record.controlCode}-操作记录`)
        },
      },
      {
        label: '详情',
        permission: 'svms:asstes:device:car-virtual-key.detail',
        method: (record) => {
          navigateTo(`/car-virtual-key/detail/${record.id}?activeType=${1}`, `${record.controlCode}-详情`)
        },
      },
    ],
    buttons: [
      {
        type: 'primary',
        permission: 'svms:asstes:device:car-virtual-key.add',
        mode: 'import',
        icon: 'plus',
        label: '新增',
        method: () => {
          navigateToCreate('/car-virtual-key/create')
        },
      },
    ],
  })
  // 列表接口调用
  const loadData = useFetchTableDataApi(table, queryParam, getCarControlList)

  import { useRoute } from 'vue-router'
  const route = useRoute()
  const routePrams = route.query
  onMounted(() => {
    const refCode = routePrams.refCode
    if (refCode) {
      queryParam.refCodeLike = refCode
    }
    loadData()
    // 注册热更新
    registerListHotUpdate(loadData)
  })
</script>
